<template>
  <div style="padding: 5px; width: 100%; height: 100%">
    <div
      class="main"
      :style="{
        transform: auditId === '' ? 'rotateY(0deg)' : 'rotateY(180deg)',
      }"
    >
      <div class="list">
        <a-card
          style="border-radius: 10px"
          :bodyStyle="{ padding: '20px', height: '100%' }"
          :bordered="false"
        >
          <a-row :gutter="24" style="margin-bottom: 15px">
            <a-col :span="8">
              <a-form-item
                label="专项经费名称"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input
                  v-model:value="filterRule.name"
                  placeholder="请输入专项经费名称"
              /></a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="专项经费类型"
                :label-col="{ style: { width: '100px' } }"
              >
                <MySelect
                  title="请选择经费类型"
                  style="width: 100%"
                  :fieldNames="{ label: 'label', value: 'label' }"
                  :selectData="typeSelect"
                  v-model:value="filterRule.type"
                ></MySelect
              ></a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="经费申请状态"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-radio-group
                  v-model:value="filterRule.status"
                  button-style="solid"
                >
                  <a-radio-button :value="undefined">全部</a-radio-button>
                  <a-radio-button :value="0">待财务审核</a-radio-button>
                  <a-radio-button :value="1">待工会主席审核</a-radio-button>
                  <a-radio-button :value="2">已审核完毕</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item
                label="申请金额大于"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input-number
                  v-model:value="filterRule.higherAmount"
                  :controls="false"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="申请金额小于"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input-number
                  v-model:value="filterRule.lowerAmount"
                  :controls="false"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-button type="primary" style="margin-left: 100px">
                <template #icon><search-outlined /></template>
                搜索
              </a-button>
            </a-col>
          </a-row>
        </a-card>
        <MyTable
          :tableData="tableData"
          :loading="loading"
          @reload="getTableData"
          :useNumber="true"
          :columns="columns"
        >
        </MyTable>
      </div>
      <div style="height: 100%" class="audit">
        <MyAudit
          :auditId="auditId"
          @close="auditId = ''"
          v-if="auditId !== ''"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import MyAudit from "./components/budgetApply/audit.vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { ref, reactive, onMounted, h } from "vue";
import { Tag, Switch, Modal, message } from "ant-design-vue";

onMounted(() => {
  getTableData();
});
const filterRule = reactive({
  name: "",
  type: undefined,
  higherAmount: undefined,
  lowerAmount: undefined,
  union: undefined,
  status: undefined,
});
const typeSelect = [
  {
    value: 0,
    label: "工会专项经费",
  },
  {
    value: 1,
    label: "基层工会专项经费",
  },
  {
    value: 2,
    label: "协会专项经费",
  },
];
/** 表格的渲染功能 */
const tableData = ref<any[]>([]);
/** 表格是否显示加载中 */
const loading = ref<boolean>(false);
/** 获取表格数据的函数 */
const getTableData = (page = 1, size = 10) => {
  console.log(page, size);
  // loading.value = true;
  // getOverture().then((res: any) => {
  //   console.log(res);
  //   tableData.value = res.data.data;
  //   loading.value = false;
  // });
  tableData.value = [
    {
      id: "1",
      name: "扩大科研项目经费",
      type: "工会专项经费",
      amount: 888888888,
      union: "经济管理学院工会",
      member: "是呆龙没错了",
      phone: "17859520236",
      time: "2023-11-15",
      status: 1,
    },
  ];
};
/**
 * 表格的操作功能 点击表格操作后任意一个触发 id=当前提案的id actionKey=当前点击的key
 */
// const overtureAvtion = (id: string, actionKey: number) => {
//   switch (actionKey) {
//     case 0:
//       message.success(`${id}邀请复议人`);
//       router.push({ path: "/overtureHandle/MyOverture", query: { id } });
//       break;
//     case 1:
//       message.success(`${id}查看`);
//       router.push({
//         name: "audit",
//         params: { id, view: 1 },
//       });
//       break;
//     case 2:
//       message.success(`${id}编辑`);
//       break;
//     case 3:
//       Modal.confirm({
//         title: "您确定要删除这条提案吗?",
//         style: {
//           top: "35%",
//         },
//         onOk() {
//           loading.value = true;
//           // delOverture(id).then(() => {
//           //   getTableData();
//           //   loading.value = false;
//           //   message.success("提案删除成功。");
//           // });
//         },
//       });
//       break;
//   }
// };
const auditId = ref("");
const columns = ref([
  {
    title: "专项经费名称",
    dataIndex: "name",
    align: "center",
    isShow: true,
  },
  {
    title: "专项经费类型",
    dataIndex: "type",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h("a", {}, text);
    },
  },
  {
    title: "申请金额",
    dataIndex: "amount",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: "orange" }, () => convertLimit(text));
    },
  },
  {
    title: "申请工会",
    dataIndex: "union",
    isShow: true,
    align: "center",
  },
  {
    title: "申请人",
    dataIndex: "member",
    isShow: true,
    align: "center",
  },
  {
    title: "申请人电话",
    dataIndex: "phone",
    isShow: true,
    align: "center",
  },
  {
    title: "申请时间",
    dataIndex: "time",
    isShow: true,
    align: "center",
  },
  {
    title: "审核状态",
    dataIndex: "status",
    isShow: true,
    align: "center",
    customRender: ({ record }) => {
      return h(
        "span",
        null,
        [
          {
            name: "待财务审核",
            color: "blue",
          },
          {
            name: "待工会主席审核",
            color: "cyan",
          },
          {
            name: "已审核完毕",
            color: "green",
          },
        ].map((item, index) => {
          if (index !== record.status) {
            return;
          }
          return h(
            Tag,
            {
              color: item.color,
            },
            () => item.name
          );
        })
      );
    },
  },
  {
    title: "是否作废",
    dataIndex: "void",
    isShow: true,
    align: "center",
    customRender: () => {
      // checked-children="开" un-checked-children="关"
      return h(
        Switch,
        {
          checkedChildren: "已作废",
          unCheckedChildren: "已启用",
          checkedValue: 1,
          unCheckedValue: 0,
          checked: 1,
          onClick(val) {
            if (val) {
              Modal.confirm({
                title: "确定要作废吗，作废后将无法再次启用。",
                onOk() {
                  console.log("OK");
                },
                onCancel() {
                  console.log("Cancel");
                },
                class: "test",
              });
            }else {
              message.warning('作废后无法再次启用')
            }
          },
        },
        () => ""
      );
    },
  },
  {
    title: "操作",
    dataIndex: "proposalNameOrCode",
    isShow: true,
    align: "center",
    maxWidth: 220,
    customRender: ({ record }: any) => {
      return h(
        "span",
        null,
        ["查看", "审核", "删除"].map((item, index) => {
          return h(
            "a",
            {
              onClick: () => {
                if (index === 1) {
                  auditId.value = record.id;
                }
              },
              style: { margin: "0 5px" },
            },
            item
          );
        })
      );
    },
  },
]);

const convertLimit = (arg: number) => {
  if (!arg) {
    return undefined;
  }
  if (arg.toString().length >= 13) {
    // return arg/1000000000000+"万亿"
    const volume = arg / 1000000000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万亿";
  } else if (arg.toString().length >= 9) {
    const volume = arg / 100000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "亿";
  } else if (arg.toString().length >= 5) {
    const volume = arg / 10000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万";
  } else {
    return arg;
  }
};
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
:deep(.ant-col) {
  width: auto;
}
:deep(.ant-form-item) {
  margin-bottom: 0;
}

.main {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  transform-style: preserve-3d;
  .list,
  .audit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .audit {
    transform: rotateY(180deg);
  }
}
</style>
